M
MLOG
التحميل الكسول في React: تقسيم شيفرة المكونات لتحسين الأداء | MLOG | MLOG ); } export default ImageGallery;

ومكون Image.js:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

في هذا المثال، يتم تغليف كل صورة بمكون <Suspense>، لذلك سيتم عرض رسالة تحميل لكل صورة أثناء تحميلها. وهذا يمنع الصفحة بأكملها من التعطل أثناء تنزيل الصور.

تقنيات واعتبارات متقدمة

1. حدود الأخطاء (Error Boundaries)

عند استخدام التحميل الكسول، من المهم التعامل مع الأخطاء المحتملة التي قد تحدث أثناء عملية التحميل. يمكن استخدام حدود الأخطاء (Error Boundaries) لالتقاط هذه الأخطاء وعرض واجهة مستخدم احتياطية. يمكنك إنشاء مكون حد خطأ على النحو التالي:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
حدث خطأ ما.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

ثم قم بتغليف مكون <Suspense> بمكون <ErrorBoundary>:



  جاري التحميل...}>

إذا حدث خطأ أثناء تحميل MyComponent، سيلتقطه <ErrorBoundary> ويعرض واجهة المستخدم الاحتياطية.

2. العرض من جانب الخادم (SSR) والتحميل الكسول

يمكن أيضًا استخدام التحميل الكسول بالتزامن مع العرض من جانب الخادم (SSR) لتحسين وقت التحميل الأولي لتطبيقك. ومع ذلك، فإنه يتطلب بعض الإعدادات الإضافية. ستحتاج إلى التأكد من أن الخادم يمكنه التعامل بشكل صحيح مع الاستيرادات الديناميكية وأن المكونات التي تم تحميلها كسولًا يتم "ترطيبها" بشكل صحيح على جانب العميل.

توفر أدوات مثل Next.js و Gatsby.js دعمًا مدمجًا للتحميل الكسول وتقسيم الشيفرة في بيئات SSR، مما يجعل العملية أسهل بكثير.

3. التحميل المسبق للمكونات التي تم تحميلها كسولًا

في بعض الحالات، قد ترغب في التحميل المسبق لمكون تم تحميله كسولًا قبل أن تكون هناك حاجة فعلية إليه. يمكن أن يكون هذا مفيدًا للمكونات التي من المحتمل أن يتم عرضها قريبًا، مثل المكونات الموجودة أسفل الطية ولكن من المحتمل أن يتم تمريرها إلى العرض. يمكنك التحميل المسبق لمكون عن طريق استدعاء دالة import() يدويًا:


import('./MyComponent'); // تحميل MyComponent مسبقًا

سيؤدي هذا إلى بدء تحميل المكون في الخلفية، بحيث يكون متاحًا بشكل أسرع عندما يتم عرضه بالفعل.

4. الاستيرادات الديناميكية مع تعليقات Webpack السحرية

توفر "التعليقات السحرية" في Webpack طريقة لتخصيص أسماء أجزاء الشيفرة التي تم إنشاؤها. يمكن أن يكون هذا مفيدًا لتصحيح الأخطاء وتحليل بنية حزمة تطبيقك. على سبيل المثال:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

سيؤدي هذا إلى إنشاء جزء شيفرة باسم "my-component.js" (أو ما شابه ذلك) بدلاً من اسم عام.

5. تجنب الأخطاء الشائعة

أمثلة واقعية وحالات الاستخدام

يمكن تطبيق التحميل الكسول على مجموعة واسعة من السيناريوهات لتحسين أداء تطبيقات React. إليك بعض الأمثلة:

مثال: موقع تجارة إلكترونية دولي

تخيل موقعًا للتجارة الإلكترونية يبيع المنتجات على مستوى العالم. قد يكون لكل دولة عملات ولغات وكتالوجات منتجات مختلفة. بدلاً من تحميل جميع البيانات لكل دولة مقدمًا، يمكنك استخدام التحميل الكسول لتحميل البيانات الخاصة بموقع المستخدم فقط عندما يزور الموقع.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // دالة لتحديد بلد المستخدم

  return (
    جاري تحميل المحتوى لمنطقتك...}>
      
      
    
  );
}

الخاتمة

يعد التحميل الكسول وتقسيم شيفرة المكونات من التقنيات القوية لتحسين أداء تطبيقات React. من خلال تحميل المكونات فقط عند الحاجة إليها، يمكنك تقليل وقت التحميل الأولي بشكل كبير، وتحسين تجربة المستخدم، وتعزيز تحسين محركات البحث (SEO) لديك. مكونات React.lazy() و <Suspense> المدمجة في React تجعل من السهل تنفيذ التحميل الكسول في مشاريعك. احتضن هذه التقنيات لبناء تطبيقات ويب أسرع وأكثر استجابة وجاذبية لجمهور عالمي.

تذكر دائمًا مراعاة تجربة المستخدم عند تنفيذ التحميل الكسول. وفر واجهات مستخدم احتياطية غنية بالمعلومات، وتعامل مع الأخطاء المحتملة بلطف، وحلل أداء تطبيقك بعناية للتأكد من أنك تحقق النتائج المرجوة. لا تخف من تجربة طرق مختلفة والعثور على أفضل حل لاحتياجاتك الخاصة.